import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/memo_page.dart';
import 'pages/goal_page.dart';
import 'pages/profile_page.dart';
import 'pages/month_calendar_page.dart';
import 'routes.dart';

/// 应用程序入口
void main() {
  runApp(const MyApp());
}

/// 应用程序根组件
/// 继承自StatelessWidget，因为只负责配置应用的基本设置（标题、主题等），这些配置在应用生命周期内不会改变，不需要响应任何状态变化
/// 
/// 知识点：
/// 1. StatelessWidget：用于描述不会改变的UI结构，适合用于配置应用的基本设置
/// 2. StatefulWidget：用于描述会改变的UI结构，适合用于配置应用的交互界面
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  /// 构建应用的根组件
  /// 知识点：
  /// 1.Widget的子类必须实现build方法，返回一个Widget
  /// 2.MaterialApp是 Material Design 风格应用的根组件，提供了Material Design 风格的基础组件和功能
  /// 3.build函数的调用是Flutter框架自动进行的，当需要更新UI时，Flutter会调用build方法重新构建UI
  /// 4.MyApp组件的构造方法在生命周期内只调用一次，但是build方法被自动调用多次，用于更新UI
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '自律助手',                    // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue,            // 主色调
        useMaterial3: true,                    // 使用Material 3设计
        brightness: Brightness.light,           // 亮色主题
      ),
      darkTheme: ThemeData(
        primarySwatch: Colors.blue,            // 主色调
        useMaterial3: true,                    // 使用Material 3设计
        brightness: Brightness.dark,            // 暗色主题
      ),
      home: const MainPage(),                    // 首页
      onGenerateRoute: generateRoute,            // 使用routes.dart中的路由生成函数
      debugShowCheckedModeBanner: false,          // 是否显示调试标签
      locale: const Locale('zh'),                 // 本地化设置
    );
  }
}

/// 主页面组件
/// 知识点：
/// 1.StatefulWidget：用于描述会改变的UI结构，适合用于配置应用的交互界面
/// 2.State：用于描述组件的状态，适合用于配置应用的交互界面
/// 3.一个StatefulWidget只能有一个createState方法，用于创建State对象
class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

///创建主页面的State对象
class _MainPageState extends State<MainPage> {
  int _selectedIndex = 0;///页面索引
  final List<Widget> _pages = [///主导航栏控制的4个页面
    const HomePage(),
    const MonthCalendarPage(),
    const MemoPage(),
    const GoalPage(),
    const ProfilePage(),
  ];

  /// 构建主页面
  /// 知识点：
  /// 1.Scaffold：用于描述Material Design风格的页面结构，提供了Material Design风格的页面结构和功能
  /// 2.Scaffold的body属性用于设置页面内容，可以是任何Widget
  /// 3.Scaffold的bottomNavigationBar属性用于设置底部导航栏，可以是任何Widget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '主页'),
          BottomNavigationBarItem(icon: Icon(Icons.calendar_month), label: '一图流'),
          BottomNavigationBarItem(icon: Icon(Icons.mail), label: '备忘录'),
          BottomNavigationBarItem(icon: Icon(Icons.flag), label: '小目标'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '个人中心'),
        ],
        currentIndex: _selectedIndex,///当前选中的页面索引
        type: BottomNavigationBarType.fixed,///底部导航栏类型
        onTap: (index) {///点击底部导航栏的回调函数
          setState(() {
            _selectedIndex = index;///更新页面索引
          });
        },
      ),
    );
  }
}